<template>
  <div class="bottom">
    <div class="logo">
      <img src="../assets/logo-white.png" alt class="logopic" />
    </div>
    <div class="list">
      <ul>
        <li @click="change(1)">首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</li>
        <li @click="change(2)">产品展示</li>
        <li @click="change(3)">关于曲姣</li>
        <li @click="change(4)">健康园地</li>
        <li @click="change(5)">会员中心</li>
        <li @click="change(6)">联系我们</li>
      </ul>
    </div>
    <div class="address">
      <p>公司地址：北京市顺义区南法信镇南法信大街118号院1号楼2410室 邮编：101300</p>
      <p style="top: 20px;">建议使用1920*1080分辨率访问网站</p>
    </div>
    <div class="line"></div>
    <div class="beian">
      <div>
        <span>北京曲姣科技有限公司</span>
        <span>版权所有&nbsp;&nbsp;<a href="https://beian.miit.gov.cn/" target="_blank" style="color:white">京ICP备20004703号-1</a></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    change(i) {
      Bus.$emit("topbar", i);
      window.scrollTo(0, 0);
    }
  }
};
</script>

<style scoped lang="scss">
.bottom {
  padding: 30px 0 12px;
  background-color: #c9980b;
  height: auto;
}
.logo {
  width: 64px;
  margin: 0 auto;
}

.list {
  margin: 15px auto;
  color: white;
  font-size: 16px;
  max-width: 798px;
  width: 100%;
  margin-top: 12px;

  > ul {
    height: 40px;
    padding: 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    li {
      float: left;
      width: 120px;
      display: block;
      padding-left: 20px;
      padding-right: 20px;
      text-align: center;
      border-right: 1px solid white;
      cursor: pointer;
      height: 25px;
      box-sizing: border-box;
      line-height: 25px;
      &:first-child {
        border-left: 1px solid white;
      }
    }
    &::after {
      clear: both;
      content: ' ';
      display: block;
      width: 0;
      height: 0;
      visibility: hidden;
    }

    @media screen and (max-width: 810px) {
      max-width: 700px;
      height: 36px;
      li {
        width: 70px;
      }
    }
    @media screen and (max-width: 745px) {
      width: 360px;
      height: 55px;
      display: block;
      li {
        margin-top: 4px;
        width: 33.33%;
        &:first-child {
          border-left: none;
        }
        &:last-child {
          border-right: none;
        }
        &:nth-child(3) {
          border-right: none;
        }
      }
    }
    @media screen and (max-width: 480px) {
      li {
        font-size: 15px;
      }
    }
    @media screen and (max-width: 320px) {
      li {
        padding: 0 4px;
      }
    }
  }

}
.address {
  color: white;
  position: relative;
}
.address > p {
  margin: 8px;
  font-size: 12px;
}
.line {
  width: 100%;
  height: 20px;
  border-bottom: 0.5px solid white;
}
.beian {
  margin-top: 10px;
  font-size: 12px;
  color: white;
  position: relative;
}
.beian > div {

}
.logopic {
  width: 81px;
  transform: translateX(-3px);
}
</style>
